/*----------------------------------------*\
  ACCORDION
\*----------------------------------------*/

.accordion,
main .accordion {
  @apply pl-0;
}

.accordion--spaced {
  @apply py-8;
}

.accordion__item {
  @apply border-t border-secondary-200;
  @apply list-none;
  @apply mt-0 !important;

  &:last-of-type {
    @apply border-b border-secondary-200;
  }
}

.accordion__button {
  @apply flex items-center;
  @apply w-full px-2 py-3 2xl:px-3 2xl:py-5;
  @apply font-bold;
  @apply hover:text-primary-500;
  @apply transition-colors duration-200;

  @media (hover: none) {
    &:hover {
      color: inherit;
    }
  }

  .step__indicator {
    @apply mr-3;
  }
}

.accordion__button-disabled {
  @apply cursor-default;
}

.accordion__arrow {
  @apply transition-transform duration-200;
  @apply ml-auto;

  .active & {
    @apply rotate-180;
  }
}

.accordion__drawer {
  @apply w-full max-h-0;
  @apply overflow-hidden;
  transition: max-height 0.3s ease-out;
}

/* Dynamically adjust to content */
.accordion__drawer.active {
  @apply max-h-fit;
}

.accordion__content {
  @apply w-full px-2 pt-4 pb-10 2xl:px-3;
  @apply vertical-spacing;
}

.accordion__title {
  @apply text-base text-left py-1 pr-4;
  @apply lg:pr-6 2xl:pr-8;
}

.highlight-blue {
  @apply bg-blue-100;
}
